آموزش HTML5 Canvas - ایجاد 5 بازی، 5 پروژه و یادگیری جاوا اسکریپت [ویدئو]

سرفصل ها و درس ها

مقدمه ای بر طراحی با استفاده از جاوا اسکریپت در عنصر بوم HTML5 Introduction to Drawing using JavaScript on HTML5 Canvas Element

• HTML5 Canvas معرفی HTML5 Canvas Introduction

• HTML5 Canvas معرفی HTML5 Canvas Introduction

• منابع راه اندازی WebDeveloper WebDeveloper Setup Resources

• منابع راه اندازی WebDeveloper WebDeveloper Setup Resources

• طراحی روی بوم را با جاوا اسکریپت شروع کنید Start Drawing on Canvas with JavaScript

• طراحی روی بوم را با جاوا اسکریپت شروع کنید Start Drawing on Canvas with JavaScript

• اصول طراحی روی بوم Basics of Drawing on Canvas

• اصول طراحی روی بوم Basics of Drawing on Canvas

• واحدهای رنگ و گزینه‌های خط و پر کردن رنگ در اشیاء بوم Color Units and Options for Line and Fill Color within Canvas Objects

• واحدهای رنگ و گزینه‌های خط و پر کردن رنگ در اشیاء بوم Color Units and Options for Line and Fill Color within Canvas Objects

• ضربه ها و خطوط: کشیدن اشیاء بیشتر روی بوم Strokes and Lines: Drawing More Objects on Canvas

• ضربه ها و خطوط: کشیدن اشیاء بیشتر روی بوم Strokes and Lines: Drawing More Objects on Canvas

• کمان ها و دایره ها را رسم کنید Draw Arcs and Circles

• کمان ها و دایره ها را رسم کنید Draw Arcs and Circles

• متن را به Canvas JavaScript اضافه کنید Add Text to Canvas JavaScript

• متن را به Canvas JavaScript اضافه کنید Add Text to Canvas JavaScript

• طراحی بوم: یک چالش StickMan را بکشید Canvas Drawing: Draw a StickMan Challenge

• طراحی بوم: یک چالش StickMan را بکشید Canvas Drawing: Draw a StickMan Challenge

• گزینه ها و نحوه ترسیم سبک های خط روی بوم Options and How to Draw Line Styles on Canvas

• گزینه ها و نحوه ترسیم سبک های خط روی بوم Options and How to Draw Line Styles on Canvas

• استفاده از تصاویر - گزینه های تصویر Canvas HTML5 JavaScript Drawing Using Images - Image Options Canvas HTML5 JavaScript Drawing

• استفاده از تصاویر - گزینه های تصویر Canvas HTML5 JavaScript Drawing Using Images - Image Options Canvas HTML5 JavaScript Drawing

• شیب رنگ و سرگرمی یک ظاهر طراحی شده Color Gradients and Styling Fun

• شیب رنگ و سرگرمی یک ظاهر طراحی شده Color Gradients and Styling Fun

• اعمال سایه های متنی بر روی محتوای متنی درون بوم Applying Text Shadows to Text Content Within Canvas

• اعمال سایه های متنی بر روی محتوای متنی درون بوم Applying Text Shadows to Text Content Within Canvas

• نحوه استفاده از ذخیره و بازیابی How to Use Save and Restore

• نحوه استفاده از ذخیره و بازیابی How to Use Save and Restore

• مقیاس بندی متن معکوس: محتوای متن خود را بازتاب دهید Scaling Reverse Text: Mirror Your Text Content

• مقیاس بندی متن معکوس: محتوای متن خود را بازتاب دهید Scaling Reverse Text: Mirror Your Text Content

• ایجاد انیمیشن های بوم با استفاده از جاوا اسکریپت Creating Canvas Animations using JavaScript

• ایجاد انیمیشن های بوم با استفاده از جاوا اسکریپت Creating Canvas Animations using JavaScript

• پروژه: نحوه ایجاد روتاتور تصویر Project: How to Create Image Rotator

• پروژه: نحوه ایجاد روتاتور تصویر Project: How to Create Image Rotator

• شیب رنگ و سرگرمی یک ظاهر طراحی شده Color Gradients and Styling Fun

• شیب رنگ و سرگرمی یک ظاهر طراحی شده Color Gradients and Styling Fun

بازی نبرد با استفاده از HTML5 Canvas و JavaScript Battle Game using HTML5 Canvas and JavaScript

• معرفی بازی نبرد Battle Game Introduction

• معرفی بازی نبرد Battle Game Introduction

• راه اندازی بازی: نحوه تنظیم و ترسیم HTML5 Game Setup: How to Set up and Draw HTML5

• راه اندازی بازی: نحوه تنظیم و ترسیم HTML5 Game Setup: How to Set up and Draw HTML5

• نحوه ترسیم مسیرها روی بوم: آمادگی بازی How to Draw Paths on Canvas: Game Prep

• نحوه ترسیم مسیرها روی بوم: آمادگی بازی How to Draw Paths on Canvas: Game Prep

• نحوه رسم کمان و دایره روی بوم How to Draw Arcs and Circles on Canvas

• نحوه رسم کمان و دایره روی بوم How to Draw Arcs and Circles on Canvas

• نحوه ساخت انیمیشن بازی با فریم انیمیشن جاوا اسکریپت Canvas HTML5 How to Make Game Animation with Canvas HTML5 JavaScript Animation Frame

• نحوه ساخت انیمیشن بازی با فریم انیمیشن جاوا اسکریپت Canvas HTML5 How to Make Game Animation with Canvas HTML5 JavaScript Animation Frame

• با کلیدهای پیکان و حرکت شنونده رویداد صفحه کلید، بازی را تعاملی کنید Make the Game Interactive with Arrow Keys and Keyboard Event Listener Move

• با کلیدهای پیکان و حرکت شنونده رویداد صفحه کلید، بازی را تعاملی کنید Make the Game Interactive with Arrow Keys and Keyboard Event Listener Move

• چگونه یک بازیکن دوم را به بازی HTML5 Canvas خود اضافه کنید How to Add a Second Player to Your HTML5 Canvas Game

• چگونه یک بازیکن دوم را به بازی HTML5 Canvas خود اضافه کنید How to Add a Second Player to Your HTML5 Canvas Game

• نحوه تعیین شرایط و مرزهای حرکت برای بازیکنان در بازی How to Set Movement Conditions and Boundaries for Players in the Game

• نحوه تعیین شرایط و مرزهای حرکت برای بازیکنان در بازی How to Set Movement Conditions and Boundaries for Players in the Game

• نحوه اضافه کردن تیراندازی با Keypresses Player Event Listeners How to Add Shooting with Keypresses Player Event Listeners

• نحوه اضافه کردن تیراندازی با Keypresses Player Event Listeners How to Add Shooting with Keypresses Player Event Listeners

• نحوه اضافه کردن اشیاء تشخیص برخورد در بازی جاوا اسکریپت HTML5 How to Add Collision Detection Objects within HTML5 JavaScript Game

• نحوه اضافه کردن اشیاء تشخیص برخورد در بازی جاوا اسکریپت HTML5 How to Add Collision Detection Objects within HTML5 JavaScript Game

• نحوه اضافه کردن امتیاز بازیکن به بازی JavaScript HTML5 How to Add Player Scoring within Your JavaScript HTML5 Game

• نحوه اضافه کردن امتیاز بازیکن به بازی JavaScript HTML5 How to Add Player Scoring within Your JavaScript HTML5 Game

• نحوه بازنشانی بازی و راه اندازی مجدد مقادیر بازی How to Reset Game and Restart the Game Values

• نحوه بازنشانی بازی و راه اندازی مجدد مقادیر بازی How to Reset Game and Restart the Game Values

• کد بازی HTML5: ترفندها و به روز رسانی های بازی HTML5 Game Code: Game Tweaks and Updates

• کد بازی HTML5: ترفندها و به روز رسانی های بازی HTML5 Game Code: Game Tweaks and Updates

• چگونه در بازی HTML5 یک حریف بسازیم: منطق مغز حریف How to Make an Opponent in HTML5 Game: Opponent Brain Logic

• چگونه در بازی HTML5 یک حریف بسازیم: منطق مغز حریف How to Make an Opponent in HTML5 Game: Opponent Brain Logic

• اضافه کردن منطق مغز حریف 2: وادار کردن بازیکن به حرکت در داخل بازی Adding Opponent Brain Logic 2: Making the Player Move Within the Game

• اضافه کردن منطق مغز حریف 2: وادار کردن بازیکن به حرکت در داخل بازی Adding Opponent Brain Logic 2: Making the Player Move Within the Game

• نحوه اضافه کردن حالت حمله به حریف برای بهبود گیم پلی بازی How to Add Opponent Attack Mode to Improve Your Gameplay

• نحوه اضافه کردن حالت حمله به حریف برای بهبود گیم پلی بازی How to Add Opponent Attack Mode to Improve Your Gameplay

• نحوه اضافه کردن ترفندها و تنظیمات بازی به بازی HTML5 How to Add Game Tweaks and Adjustments to Your HTML5 Game

• نحوه اضافه کردن ترفندها و تنظیمات بازی به بازی HTML5 How to Add Game Tweaks and Adjustments to Your HTML5 Game

• بررسی کد بازی و نتیجه گیری کد بخش Game Code Review and Section Code Conclusion

• بررسی کد بازی و نتیجه گیری کد بخش Game Code Review and Section Code Conclusion

• مراحل بعدی بازی: 2 بازیکن مستقل در HTML5 Canvas Battle Game V2 ایجاد کنید Game Next Steps: Make 2 Autonomous Players in HTML5 Canvas Battle Game V2

• مراحل بعدی بازی: 2 بازیکن مستقل در HTML5 Canvas Battle Game V2 ایجاد کنید Game Next Steps: Make 2 Autonomous Players in HTML5 Canvas Battle Game V2

بازی نبرد با استفاده از HTML5 Canvas و JavaScript Battle Game using HTML5 Canvas and JavaScript

یک بازی تعاملی ساده HTML5 Canvas PONG ایجاد کنید Create a Simple Interactive HTML5 Canvas PONG Game

• معرفی بازی HTML5 Canvas PONG HTML5 Canvas PONG Game Introduction

• معرفی بازی HTML5 Canvas PONG HTML5 Canvas PONG Game Introduction

• راه اندازی HTML5 Pong Board Game HTML5 HTML5 Pong Setup of HTML5 Game Board

• راه اندازی HTML5 Pong Board Game HTML5 HTML5 Pong Setup of HTML5 Game Board

• چگونه شکل های بیشتری را روی بوم بکشیم How to Draw More Shapes on Canvas

• چگونه شکل های بیشتری را روی بوم بکشیم How to Draw More Shapes on Canvas

• HTML5 Canvas Game Setup: Keyboard Interaction HTML5 Canvas Game Setup: Keyboard Interaction

• HTML5 Canvas Game Setup: Keyboard Interaction HTML5 Canvas Game Setup: Keyboard Interaction

• نحوه اضافه کردن شیء دوم روی صفحه برای بازی آنلاین پنگ How to Add Second Object on Screen for Pong Game Online

• نحوه اضافه کردن شیء دوم روی صفحه برای بازی آنلاین پنگ How to Add Second Object on Screen for Pong Game Online

• انیمیشن‌های راه‌اندازی بازی پنگ HTML5: فریم‌های انیمیشن HTML5 Pong Game Setup Animations: Animation Frames

• انیمیشن‌های راه‌اندازی بازی پنگ HTML5: فریم‌های انیمیشن HTML5 Pong Game Setup Animations: Animation Frames

• اضافه کردن تشخیص برخورد بین توپ و پارو در HTML5 Pong Adding Collision Detection Between Ball and Paddles in HTML5 Pong

• اضافه کردن تشخیص برخورد بین توپ و پارو در HTML5 Pong Adding Collision Detection Between Ball and Paddles in HTML5 Pong

• HTML5 Pong: اضافه کردن Bouncing Ball HTML5 Pong: Adding Bouncing Ball

• HTML5 Pong: اضافه کردن Bouncing Ball HTML5 Pong: Adding Bouncing Ball

• HTML5 Canvas Pong Game: ترفندهای نهایی بازی HTML5 Canvas Pong Game: Final Game Tweaks

• HTML5 Canvas Pong Game: ترفندهای نهایی بازی HTML5 Canvas Pong Game: Final Game Tweaks

• بررسی کد بازی پنگ Pong Game Code Review

• بررسی کد بازی پنگ Pong Game Code Review

یک بازی تعاملی ساده HTML5 Canvas PONG ایجاد کنید Create a Simple Interactive HTML5 Canvas PONG Game

HTML5 Canvas Game Bubble Popper بازی جاوا اسکریپت HTML5 Canvas Game Bubble Popper JavaScript Game

• ایجاد یک بازی Bubble Popping با Canvas: مقدمه ای بر Bubble Popper Creating a Bubble Popping Game with Canvas: Introduction to Bubble Popper

• ایجاد یک بازی Bubble Popping با Canvas: مقدمه ای بر Bubble Popper Creating a Bubble Popping Game with Canvas: Introduction to Bubble Popper

• بوم HTML را برای بازی Bubble Popping تنظیم کنید Set Up HTML Canvas for Bubble Popping Game

• بوم HTML را برای بازی Bubble Popping تنظیم کنید Set Up HTML Canvas for Bubble Popping Game

• نحوه ایجاد حباب در پر شیب بوم How to Create Bubbles on Canvas Gradient Fill

• نحوه ایجاد حباب در پر شیب بوم How to Create Bubbles on Canvas Gradient Fill

• بازی Bubble Popping: Generate Bubbles Bubble Popping Game: Generate Bubbles

• بازی Bubble Popping: Generate Bubbles Bubble Popping Game: Generate Bubbles

• انیمیشن اشیاء بازی: حباب های متحرک HTML5 Game Objects Animations: Moving Bubbles HTML5

• انیمیشن اشیاء بازی: حباب های متحرک HTML5 Game Objects Animations: Moving Bubbles HTML5

• افزودن حباب های بیشتر: ایجاد محتوای پویا Adding More Bubbles: Creating Dynamic Content

• افزودن حباب های بیشتر: ایجاد محتوای پویا Adding More Bubbles: Creating Dynamic Content

• افزودن کلیک ماوس بر روی Canvas Clickevents Adding Mouse Clicks on Canvas Clickevents

• افزودن کلیک ماوس بر روی Canvas Clickevents Adding Mouse Clicks on Canvas Clickevents

• تشخیص برخورد با کلیک ماوس Mouse Click Collision Detection

• تشخیص برخورد با کلیک ماوس Mouse Click Collision Detection

• ایجاد گیم پلی HTML5 Canvas Game: Multiple Array Collision Detection Creating Gameplay HTML5 Canvas Game: Multiple Array Collision Detection

• ایجاد گیم پلی HTML5 Canvas Game: Multiple Array Collision Detection Creating Gameplay HTML5 Canvas Game: Multiple Array Collision Detection

• ارزش های بازی و گیم پلی: اضافه کردن بوم امتیازدهی بازی Game Values and Gameplay: Adding Game Scoring Canvas

• ارزش های بازی و گیم پلی: اضافه کردن بوم امتیازدهی بازی Game Values and Gameplay: Adding Game Scoring Canvas

• بررسی کد نهایی: Bubble Popper Final Code Review: Bubble Popper

• بررسی کد نهایی: Bubble Popper Final Code Review: Bubble Popper

HTML5 Canvas Game Bubble Popper بازی جاوا اسکریپت HTML5 Canvas Game Bubble Popper JavaScript Game

بازی Falling Object Catcher: HTML5 Canvas و JavaScript Falling Object Catcher Game: HTML5 Canvas and JavaScript

• مقدمه: بازی گیر Introduction: Catcher Game

• مقدمه: بازی گیر Introduction: Catcher Game

• راه اندازی بازی کد HTML برای بوم HTML5 Set Up HTML Code game for HTML5 canvas

• راه اندازی بازی کد HTML برای بوم HTML5 Set Up HTML Code game for HTML5 canvas

• نحوه ایجاد عناصر جاوا اسکریپت How to Create JavaScript Elements

• نحوه ایجاد عناصر جاوا اسکریپت How to Create JavaScript Elements

• اضافه کردن شنوندگان رویداد صفحه کلید Adding Keyboard Event Listeners

• اضافه کردن شنوندگان رویداد صفحه کلید Adding Keyboard Event Listeners

• گیم پلی: اضافه کردن و رها کردن آیتم های تصادفی Gameplay: Add and Drop Random Items

• گیم پلی: اضافه کردن و رها کردن آیتم های تصادفی Gameplay: Add and Drop Random Items

• گیم پلی: اضافه کردن محتوای متحرک پویا: جابجایی اشیاء تصادفی Gameplay: Adding Dynamic Moving Content: Move Random Objects

• گیم پلی: اضافه کردن محتوای متحرک پویا: جابجایی اشیاء تصادفی Gameplay: Adding Dynamic Moving Content: Move Random Objects

• رنگ ها را اضافه کنید و خطرات را برای افزایش گیم پلی تنظیم کنید Add Colors and Set hazards to Increase Gameplay

• رنگ ها را اضافه کنید و خطرات را برای افزایش گیم پلی تنظیم کنید Add Colors and Set hazards to Increase Gameplay

• تعاملات بازی: تشخیص برخورد HTML5 Game Interactions: Collision Detection HTML5

• تعاملات بازی: تشخیص برخورد HTML5 Game Interactions: Collision Detection HTML5

• ساخت بازی تعاملی: HTML5 Canvas Game Collision Actions Making Game Interactive: HTML5 Canvas Game Collision Actions

• ساخت بازی تعاملی: HTML5 Canvas Game Collision Actions Making Game Interactive: HTML5 Canvas Game Collision Actions

• گیم پلی امتیازدهی و حفظ شمارش Gameplay Scoring and Keeping Count

• گیم پلی امتیازدهی و حفظ شمارش Gameplay Scoring and Keeping Count

• اضافه کردن کنترل های بازی Adding Game Controls

• اضافه کردن کنترل های بازی Adding Game Controls

• نحوه تنظیم Restart برای Game و Game End: گزینه Start Game How to Set Restart for Game and Game End: Start Game Option

• نحوه تنظیم Restart برای Game و Game End: گزینه Start Game How to Set Restart for Game and Game End: Start Game Option

• بررسی کد بازی Canvas Catcher HTML5 HTML5 Canvas Catcher Game Code Review

• بررسی کد بازی Canvas Catcher HTML5 HTML5 Canvas Catcher Game Code Review

بازی Falling Object Catcher: HTML5 Canvas و JavaScript Falling Object Catcher Game: HTML5 Canvas and JavaScript

JavaScript HTML5 Breakout Game: Block Breaker JavaScript HTML5 Breakout Game: Block Breaker

• معرفی بازی Brick Breaker Brick Breaker Game Introduction

• معرفی بازی Brick Breaker Brick Breaker Game Introduction

• HTML5 Canvas و JavaScript Breakout Game Setup HTML5 Canvas and JavaScript Breakout Game Setup

• HTML5 Canvas و JavaScript Breakout Game Setup HTML5 Canvas and JavaScript Breakout Game Setup

• نحوه تنظیم پدل بازیکن برای بازی Breakout How to Set Up Player Paddle for Breakout Game

• نحوه تنظیم پدل بازیکن برای بازی Breakout How to Set Up Player Paddle for Breakout Game

• اضافه کردن حرکت بازیکن: حرکت بازیکن شنوندگان رویداد را فشار می دهد Adding Player Movement: Player Movement KeyPresses Event Listeners

• اضافه کردن حرکت بازیکن: حرکت بازیکن شنوندگان رویداد را فشار می دهد Adding Player Movement: Player Movement KeyPresses Event Listeners

• حرکت تعاملات بازیکن و انیمیشن ها: حرکت دست و پا زدن بازیکن Player Interactions Movement and Animations: Move Player Paddle

• حرکت تعاملات بازیکن و انیمیشن ها: حرکت دست و پا زدن بازیکن Player Interactions Movement and Animations: Move Player Paddle

• Mouse Event Listeners for Player Movement: Mouse Movement Player Mouse Event Listeners for Player Movement: Mouse Movement Player

• Mouse Event Listeners for Player Movement: Mouse Movement Player Mouse Event Listeners for Player Movement: Mouse Movement Player

• بازی Breakout: اضافه کردن حرکت توپ: اضافه کردن یک توپ پرش Breakout Game: Adding Ball Movement: Add a Bouncing Ball

• بازی Breakout: اضافه کردن حرکت توپ: اضافه کردن یک توپ پرش Breakout Game: Adding Ball Movement: Add a Bouncing Ball

• محتوای پویا و اشیاء تعاملی روی بوم: تشخیص برخورد Dynamic Content and Interactive Objects on Canvas: Collision Detection

• محتوای پویا و اشیاء تعاملی روی بوم: تشخیص برخورد Dynamic Content and Interactive Objects on Canvas: Collision Detection

• راه اندازی صفحه بازی: آجرهای بیشتر برای شکستن: آجرها را به صفحه اضافه کنید Set Up Game Board: More Bricks to Break: Add Bricks to Screen

• راه اندازی صفحه بازی: آجرهای بیشتر برای شکستن: آجرها را به صفحه اضافه کنید Set Up Game Board: More Bricks to Break: Add Bricks to Screen

• Breakout Game Interactive Bricks: Update Bricks Breakout Game Interactive Bricks: Update Bricks

• Breakout Game Interactive Bricks: Update Bricks Breakout Game Interactive Bricks: Update Bricks

• شرایط بازی و برد بازی: امتیاز و برنده شدن Gameplay and Game Win Conditions: Scoring and Winning

• شرایط بازی و برد بازی: امتیاز و برنده شدن Gameplay and Game Win Conditions: Scoring and Winning

• اضافه کردن به‌روزرسانی‌ها و ترفندهای نهایی بازی Adding Final Game Updates and Tweaks

• اضافه کردن به‌روزرسانی‌ها و ترفندهای نهایی بازی Adding Final Game Updates and Tweaks

• اشکال زدایی بازی بوم HTML5: رفع اشکال و ترفندها HTML5 Canvas Game Debugging: Bug Fixes and Tweaks

• اشکال زدایی بازی بوم HTML5: رفع اشکال و ترفندها HTML5 Canvas Game Debugging: Bug Fixes and Tweaks

• نحوه تنظیم محتوای پاداش و مراحل بعدی برای گیم پلی How to Set Up Bonus Content and Next Steps for Gameplay

• نحوه تنظیم محتوای پاداش و مراحل بعدی برای گیم پلی How to Set Up Bonus Content and Next Steps for Gameplay

• حرکت محتوای بازی: به روز رسانی سرعت توپ Game Content Making Movement: Ball Speed Update

• حرکت محتوای بازی: به روز رسانی سرعت توپ Game Content Making Movement: Ball Speed Update

• بررسی کد نهایی بازی Final Game Code Review

• بررسی کد نهایی بازی Final Game Code Review

JavaScript HTML5 Breakout Game: Block Breaker JavaScript HTML5 Breakout Game: Block Breaker

سوالات و پاسخ های دوره: کدهای مفید و نمونه کد Course Questions and Answers: Useful Code Snippets and Code Examples

• دانلود Canvas Image - JavaScript خالص ایجاد عناصر با تعامل Download Canvas Image - Pure JavaScript Create Elements with Interactions

• دانلود Canvas Image - JavaScript خالص ایجاد عناصر با تعامل Download Canvas Image - Pure JavaScript Create Elements with Interactions

• افکت ماتریس سقوط حروف با بوم و جاوا اسکریپت Matrix Falling Letters Effect with Canvas and JavaScript

• افکت ماتریس سقوط حروف با بوم و جاوا اسکریپت Matrix Falling Letters Effect with Canvas and JavaScript

• چگونه با استفاده از بوم HTML5 و جاوا اسکریپت یک توپ پرش ایجاد کنیم How to Create a Bouncing Ball using HTML5 Canvas and JavaScript

• چگونه با استفاده از بوم HTML5 و جاوا اسکریپت یک توپ پرش ایجاد کنیم How to Create a Bouncing Ball using HTML5 Canvas and JavaScript

• آپلود تصویر در بوم Image Uploads to Canvas

• آپلود تصویر در بوم Image Uploads to Canvas

• پروژه Draw on Canvas - طراحی و ذخیره تصاویر با استفاده از جاوا اسکریپت در بوم HTML5 Draw on Canvas Project - Draw and Save Images using JavaScript on HTML5 Canvas

• پروژه Draw on Canvas - طراحی و ذخیره تصاویر با استفاده از جاوا اسکریپت در بوم HTML5 Draw on Canvas Project - Draw and Save Images using JavaScript on HTML5 Canvas

سوالات و پاسخ های دوره: کدهای مفید و نمونه کد Course Questions and Answers: Useful Code Snippets and Code Examples